/**
 * Created by python on 18-11-11.
 */
let app = new Vue({
    el: '#app',
    data: {
        host: "http://127.0.0.1:8000",
        ordering: 'news_respond', // 排序关键字
        page: 1, // 当前页数
        page_size: 5, // 每页数量
        questions:[], // 问题列表
        labels:[], // 导航标签
        hot_label:[], //热门标签
        cat:0,// 0表示所有类别
        question_id:'',
        count:'',
        id:'',
        user_id:sessionStorage.user_id || localStorage.user_id,
        username:sessionStorage.username || localStorage.username,
        avatar:'',
        token:sessionStorage.token || localStorage.token,


    },
    computed:{
        // 需要通过计算得到的数据，键值对 ，键是名称，值是匿名函数
        total_page: function(){  // 总页数
            return Math.ceil(this.count/this.page_size);
        },
        next: function(){  // 下一页
            if (this.page >= this.total_page) {
                return 0;
            } else {
                return this.page + 1;
            }
        },
        prev: function(){  // 上一页
            if (this.page <= 0 ) {
                return 0;
            } else {
                return this.page - 1;
            }
        },
         page_nums: function(){  // 页码
            // 分页页数显示计算
            // 1.如果总页数<=5
            // 2.如果当前页是前3页
            // 3.如果当前页是后3页,
            // 4.既不是前3页，也不是后3页
            var nums = [];
            if (this.total_page <= 5) {
                for (var i=1; i<=this.total_page; i++){
                    nums.push(i);
                }
            } else if (this.page <= 3) {
                nums = [1, 2, 3, 4, 5];
            } else if (this.total_page - this.page <= 2) {
                for (var i=this.total_page; i>this.total_page-5; i--) {
                    nums.push(i);
                }
            } else {
                for (var i=this.page-2; i<this.page+3; i++){
                    nums.push(i);
                }
            }
            return nums;
        }

    },

    mounted:function () {
        // 一加载就需要做的，直接是代码
           if (this.user_id && this.token) {
               axios.get(this.host + '/user/', {
                   // 向后端传递JWT token的方法
                   headers: {
                       'Authorization': 'JWT ' + this.token
                   },
                   responseType: 'json',
               })
                   .then(response => {
                       // 加载用户数据
                       this.user_id = response.data.id;
                       this.username = response.data.username;
                       this.mobile = response.data.mobile;
                       this.avatar = response.data.avatar;
                   })
                   .catch(error => {
                       console.log(error.response.data)
                   })
           }

        this.get_question();
        this.get_label();
        this.get_hot_label();


    },
    methods:{
        // 需要用到的函数，键值对 ，键是名称，值是匿名函数
            logout: function(){
            sessionStorage.clear();
            localStorage.clear();
            this.flush()

        },
         flush(){
             location.reload()
         },
        // 显示问题列表
            get_question:function () {
                axios.get(this.host+'/question/'+this.cat+ '/',{
                        params:{
                            page: this.page,
                            page_size: this.page_size,
                            ordering: this.ordering
                        },
                        responseType:'json'
                    })
                    .then(response => {
                        this.count = response.data.count;
                        this.questions = response.data.results;

                    })
                    .catch(error => {
                        console.log(error.response.data)
                    })

            },
            // 显示导航标签
            get_label:function(){
                axios.get(this.host+ '/navigation_label/',{

                        responseType:'json'
                })
                 .then(response => {


                        this.labels = response.data;

                    })
                    .catch(error => {
                        console.log(error.response.data)
                    })
            },

            get_hot_label:function(){
                axios.get(this.host+ '/hot_label/',{

                        responseType:'json'
                })
                 .then(response => {


                        this.hot_label = response.data;

                    })
                    .catch(error => {
                        console.log(error.response.data)
                    })
            },





              on_sort: function(ordering){
            if (ordering != this.ordering) {
                this.page = 1;
                this.ordering = ordering;
                this.get_question();
            }
        },
            on_label: function(cat){
            if (cat != this.cat) {
                this.page = 1;
                this.cat = cat;
                this.get_question();
            }
        },
            on_page: function(num){
                alert(num);
            if (num != this.page){
                this.page = num;
                this.get_question();
            }
        },
            on_question: function(id){

            }

    },
     filters:{
        // 1 字符串类型日期 转 日期类型日期 str2date
        // 2 日期 -获取年月日  date2ymmd
        // 3 日期 - 获取十分秒 date2hms
        // 4 日期 - 星期 周  date2w
        // 显示 年月日 时分
        str2date:function (value) {
            return new Date(value)
        },
        date2ymd:function (value) {
            return value.getFullYear() + "年" + (value.getMonth()+1) + "月" + value.getDate() + "日"
        },
        date2hms:function (value) {
            return value.getHours() + ":" +value.getMinutes()
        }
    },
})

